<style lang="scss" scoped>
    @import './custom-screening.scss';
    $row-height:40px;
    .ui-screening-row {
        min-height: $row-height;
        display: flex;
        flex-direction: row;
        align-items: center;
        /*margin-bottom: 3px;*/
        .ui-screening-row{
            // 嵌套的row
            margin-bottom: 0;
            min-height: auto;
        }
        &:last-of-type{
            margin-bottom: 0;
        }
    }

    .ui-screening-row-content {
        flex-grow: 1;
    }

    .ui-screening-label {
        height: $row-height;
        margin-left: 10px;
        margin-right: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        color: rgba(black,.5);
        font-size:12px;
        &:after{
            content:"\FF1A";
        }
    }

    .ui-screening-flex {
        display: flex;
        align-items: center;
        &.ui-screening-between {
            justify-content: space-between;
        }
        &.ui-screening-around {
            justify-content: space-around;
        }
    }
</style>
<template>
    <div class="ui-screening-row">
        <span v-if="label" class="ui-screening-label" :style="{width: rowLabelWidth}">{{label}}</span>
        <div class="ui-screening-row-content"
             :class="{'ui-screening-flex': flex, 'ui-screening-between':between, 'ui-screening-around':around}">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'screening-row',
        props: {
            label: {
                type: String
            },
            labelWidth: {
                type: String
            },
            flex: {
                type: Boolean,
                default: false
            },
            between: {
                type: Boolean,
                default: false
            },
            around: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                rowLabelWidth: ''
            }
        },
        methods: {
            getGlobalLabelWidth() { // 获取外壳上的 label-width 参数
                let match = this.$parent
                while (match.$el.className !== 'ui-screening' && match.$el.localName !== 'body') {
                    match = match.$parent
                }
                return match.labelWidth
            },
            formatUnit(num) { // 没有单位时,默认使用 px
                if (Number(num) > 0) {
                    num += 'px'
                }
                return num
            }
        },
        mounted() {
            this.$nextTick(() => {
                // 确定需要渲染的 label 宽度
                this.rowLabelWidth = this.labelWidth || this.formatUnit(this.getGlobalLabelWidth())
            })
        }
    }
</script>
